<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" name="file" accept="video/*" id="takeVideo" capture="camcorder"/>
  <video style="display: none;" id="playVideo" controls></video>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script>
<script>eruda.init();</script>
<script>
  const takeVideo = document.querySelector('#takeVideo')
  const playVideo = document.querySelector('#playVideo')
  takeVideo.addEventListener('change', function(event) {
    const { files } = event.target
    console.log(files)
    // fileToBlob(files[0])
  console.log(playVideo)
    playVideo.src = URL.createObjectURL(files[0])
    playVideo.onloadedmetadata = function() {
      playVideo.style.display = 'block'
      playVideo.play()
    }
  })

  //script
function fileToBlob(file) {
  let reader = new FileReader();
  let rs = reader.readAsArrayBuffer(file);
  let blob = null;
  reader.onload = (e) => {
    if (typeof e.target.result === 'object') {
      blob = new Blob([e.target.result])
    } else {
      blob = e.target.result
    }
    // console.log(Object.prototype.toString.call(blob));
    playVideo.src = URL.createObjectURL(blob)
    playVideo.onloadedmetadata = function() {
      playVideo.style.display = 'block'
      playVideo.play()
    }
  console.log(blob, playVideo)
  }
}
</script>
</html>